<template>
	<div class="login">
		<el-form ref="loginRef" :model="loginForm" :rules="loginRules" class="login-form">
			<!-- <h3 class="title">丰台枢纽数智化服务系统</h3> -->
			<img src="@/assets/images/login/login-title.png" alt="" class="title" />
			<el-form-item prop="username">
				<el-input v-model="loginForm.username" type="text" size="large" auto-complete="off" placeholder="请输入账号">
					<template #prefix
						><img src="@/assets/images/login/login-icon-username.png" class="el-input__icon input-icon"
					/></template>
				</el-input>
			</el-form-item>
			<el-form-item prop="password" class="pwd-item">
				<el-input
					v-model="loginForm.password"
					type="password"
					size="large"
					auto-complete="off"
					placeholder="请输入密码"
					@keyup.enter="handleLogin"
					class="ipt-pwd"
				>
					<template #prefix
						><img src="@/assets/images/login/login-icon-pwd.png" class="el-input__icon input-icon"
					/></template>
				</el-input>
			</el-form-item>
			<!-- <el-form-item prop="code" v-if="captchaEnabled" class="code-item">
				<el-input
					v-model="loginForm.code"
					size="large"
					auto-complete="off"
					placeholder="验证码"
					style="width: 50%"
					@keyup.enter="handleLogin"
				>
					<template #prefix
						><img src="@/assets/images/login/login-icon-pwd.png" class="el-input__icon input-icon"
					/></template>
				</el-input>
				<div class="login-code">
					<img :src="codeUrl" @click="getCode" class="login-code-img" />
				</div>
			</el-form-item> -->
			<!-- <el-checkbox v-model="loginForm.rememberMe" class="remember-me"
				><span class="el-checkbox__label">记住密码</span></el-checkbox
			> -->
			<el-form-item style="width: 100%">
				<el-button
					:loading="loading"
					size="large"
					type=""
					style="width: 100%"
					@click.prevent="handleLogin"
					class="login-btn"
				>
					<span v-if="!loading">登 录</span>
					<span v-else>登 录 中...</span>
				</el-button>
				<div style="float: right" v-if="register">
					<router-link class="link-type" :to="'/register'">立即注册</router-link>
				</div>
			</el-form-item>
		</el-form>
		<!--  底部  -->
		<!-- <div class="el-login-footer">
			<span>Copyright © 2018-2023 疯狂的狮子Li All Rights Reserved.</span>
		</div> -->
	</div>
</template>

<script setup lang="ts">
	import { getCodeImg } from '@/api/login'
	import Cookies from 'js-cookie'
	import { encrypt, decrypt } from '@/utils/jsencrypt'
	import useUserStore from '@/stores/user'
	import { setToken } from '@/utils/auth'
	import { useRouter, useRoute } from 'vue-router'
	import { getCurrentInstance, ref } from 'vue'
	import type { FormInstance } from 'element-plus'
	
	const userStore = useUserStore()
	const router = useRouter()
	const { proxy } = getCurrentInstance()!
	
	const loginForm = ref<any>({
		username: 'employee',
		password: 'employee',
		rememberMe: false,
		code: '',
		uuid: '',
	})
	
	const loginRef = ref<FormInstance>()

	const loginRules = {
		username: [{ required: true, trigger: 'blur', message: '请输入您的账号' }],
		password: [{ required: true, trigger: 'blur', message: '请输入您的密码' }],
		code: [{ required: true, trigger: 'change', message: '请输入验证码' }],
	}

	const codeUrl = ref('')
	const loading = ref(false)
	// 验证码开关
	const captchaEnabled = ref(true)
	// 注册开关
	const register = ref(false)
	const redirect = ref(undefined)

	function handleLogin() {
		loginRef.value?.validate((valid: boolean) => {
			if (valid) {
				loading.value = true
				// 勾选了需要记住密码设置在 cookie 中设置记住用户名和密码
				// if (loginForm.value.rememberMe) {
				// 	Cookies.set('username', loginForm.value.username, { expires: 30 })
				// 	Cookies.set('password', encrypt(loginForm.value.password), {
				// 		expires: 30,
				// 	})
				// 	Cookies.set('rememberMe', loginForm.value.rememberMe, { expires: 30 })
				// } else {
				// 	// 否则移除
				// 	Cookies.remove('username')
				// 	Cookies.remove('password')
				// 	Cookies.remove('rememberMe')
				// }
				// 调用action的登录方法
				userStore
					.login(loginForm.value)
					.then(() => {
						router.push({ path: redirect.value || '/' })
					})
					.catch(() => {
						loading.value = false
						// 重新获取验证码
						// if (captchaEnabled.value) {
						// 	getCode()
						// }
					})
			}
		})
	}

	function getCode() {
		getCodeImg().then((res) => {
			captchaEnabled.value = res.data.captchaEnabled === undefined ? true : res.data.captchaEnabled
			if (captchaEnabled.value) {
				codeUrl.value = 'data:image/gif;base64,' + res.data.img
				loginForm.value.uuid = res.data.uuid
			}
		})
	}

	function getCookie() {
		const username = Cookies.get('username')
		const password: any = Cookies.get('password')
		const rememberMe = Cookies.get('rememberMe')
		loginForm.value = {
			username: username === undefined ? loginForm.value.username : username,
			password: password === undefined ? loginForm.value.password : decrypt(password),
			rememberMe: rememberMe === undefined ? false : Boolean(rememberMe),
			code: '',
			uuid: ''
		}
	}

	// getCode()
	// getCookie()
</script>

<style lang="scss" scoped>
	.login {
		position: relative;
		display: flex;
		height: 100%;
		background-image: url('@/assets/images/login-background.png');
	}

	.title {
		width: 1518px;
		height: 285px;
	}

	.login-form {
		position: absolute;
		border-radius: 6px;
		// background: #ffffff;
		// width: 800px;
		top: 627px;
		right: 387px;
		.el-input {
			width: 1044px;
			height: 80px;
			border: none;

			input {
				height: 80px;
			}
			:deep(.el-input__wrapper) {
				font-size: 32px;
				box-shadow: 0 0 0 0px rgba(0, 142, 255, 1) inset !important;
				border-bottom: 2px solid #999999 !important;
				background-color: transparent !important;
				padding: 50px 0px !important;
			}
			:deep(.el-input__inner) {
				color: #fff !important;
				font-size: 48px;
				height: 50px !important;
			}
		}
		:deep(.el-form-item__error) {
			margin-top: 20px;
			font-size: 30px !important;
		}
		.ipt-pwd {
			margin-top: 20px;
		}
		.input-icon {
			height: 64px;
			width: 64px;
			margin-left: 0px;
			margin-right: 20px;
		}
		.el-form-item {
			margin: 0 !important;
			margin-left: 140px !important;
		}
		.pwd-item {
			margin-top: 20px !important;
		}
		.code-item {
			margin-top: 30px !important;
		}
	}
	.login-tip {
		font-size: 26px;
		text-align: center;
		color: #bfbfbf;
	}
	.login-code {
		width: 330px;
		height: 90px;
		margin-top: 5px;

		float: right;
		img {
			width: 100%;
			height: 100%;
			cursor: pointer;
			vertical-align: middle;
		}
	}

	.el-login-footer {
		height: 80px;
		line-height: 80px;
		position: fixed;
		bottom: 0;
		width: 100%;
		text-align: center;
		color: #fff;
		font-family: Arial;
		font-size: 24px;
		letter-spacing: 1px;
	}
	.login-code-img {
		width: 270px;
		height: 80px;
		padding-left: 24px;
	}
	.remember-me {
		margin: 0px 0px 50px 0px;
		:deep(.el-checkbox__inner) {
			transform: scale(2);
		}

		.el-checkbox__label {
			font-size: 30px;
		}
	}
	.login-btn {
		width: 320px !important;
		height: 84px;
		font-size: 48px;
		color: #fff !important;
		background-image: url('@/assets/images/login/login-btn.png');
		background-repeat: no-repeat;
		background-size: 100% 100%;
		background-position: center;
		cursor: pointer;
		background-color: transparent !important;
		border: none;

		margin-top: 100px;
	}
</style>
